<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>长情传送门</title>
    <link rel="stylesheet" href="__PUBLIC__/css/style.css">
    <link rel="stylesheet" href="__PUBLIC__/css/swiper-4.3.3.min.css">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"/>
</head>
<body>

<div id="loading">
    <div id="loading-center">
        <div id="loading-center-absolute">
            <div class="object" id="object_one"></div>
            <div class="object" id="object_two"></div>
            <div class="object" id="object_three"></div>
            <div class="object" id="object_four"></div>
        </div>
    </div>
</div>
<div id="loadLogo" style="display: none">
    <img src="__PUBLIC__/img/logo_10.png" alt="" style="display: none">
    <img src="__PUBLIC__/img/logo_20.png" alt="" style="display: none">
    <img src="__PUBLIC__/img/logo_30.png" alt="" style="display: none">
    <img src="__PUBLIC__/img/logo_40.png" alt="" style="display: none">
    <img src="__PUBLIC__/img/logo_50.png" alt="" style="display: none">
    <img src="__PUBLIC__/img/logo_60.png" alt="" style="display: none">
    <img src="__PUBLIC__/img/logo_70.png" alt="" style="display: none">
    <img src="__PUBLIC__/img/logo_80.png" alt="" style="display: none">
    <img src="__PUBLIC__/img/logo_90.png" alt="" style="display: none">
    <img src="__PUBLIC__/img/logo_100.png" alt="" style="display: none">
    <div class="loding-number" id="loding-number">10%</div>
    <div class="logo" id="logo" style='background-image: url("__PUBLIC__/img/logo_10.png");'></div>
</div>
<img id="men1" src="__PUBLIC__/img/men_02.png" alt="" style="display: none">
<img src="__PUBLIC__/img/men_03.png" alt="" style="display: none">
<img src="__PUBLIC__/img/men_04.png" alt="" style="display: none">
<img src="__PUBLIC__/img/story.jpg" alt="" style="display: none">
<div id="loadBgMusic"></div>
<audio src="__PUBLIC__/mp3/被风吹过诗朗诵配音.mp3" loop="loop" preload="auto" id="bgMusic"></audio>
<audio src="__PUBLIC__/mp3/嗖的一声的飞刀声.wav" preload="auto" id="menBg"></audio>
<div class="page swiper-container" style="display: none">
    <div class="swiper-wrapper">
        <div class="page-2 swiper-slide">
            <div class="text-1">
                <p class="tlt1">据不科学统计</p>
                <p class="tlt2">遇上灵魂伴侣的概率为</p>
                <p class="tlt3" style="font-weight: 600">0.00006625%</p>
                <p class="tlt4">也就是说</p>
                <p class="tlt5">若没有特别<strong>神秘的力量</strong>把你们牵到一起,</p>
                <p class="tlt6">你遇到灵魂伴侣的概率约为... ...</p>
                <p class="tlt7" style="font-weight: 600">两百万分之一</p>
            </div>
        </div>
        <div class="page-3 swiper-slide">
            <div class="text-2">
                <p style="font-family: arial;" class="tlt8">这股神秘的力量</p>
                <p class="tlt9" style="font-family: arial;">现在统称为缘分</p>
                <p class="tlt10" style="font-family: arial;">串起了天时地利人和</p>
                <p class="tlt11" style="font-family: arial;">让你们相遇相守相知</p>
                <p class="tlt12" style="font-family: arial;margin-bottom: 6vh;">缘分究竟是个什么样的神奇的存在</p>
                <p class="tlt13" style="font-family: arial;font-weight: 600">给你一扇任意们,</p>
                <p class="tlt14" style="font-family: arial;font-weight: 600">探究专属你的情缘密码吧！</p>
            </div>
        </div>
        <div class="page-4 swiper-slide">
            <div class="bg-1 bg" style="background-image: url('__PUBLIC__/img/men_01.png')"></div>
            <div class="bg-2 bg" style="display: none;background-image: url('__PUBLIC__/img/men_02.png')"></div>
            <div class="bg-3 bg" style="display: none;background-image: url('__PUBLIC__/img/men_03.png')"></div>
            <div class="bg-4 bg" style="display: none;background-image: url('__PUBLIC__/img/men_04.png')"></div>
            <div class="btn"></div>
        </div>
        <div class="page-5 swiper-slide">
            <div class="input">
                <input type="text" name="name" placeholder="输入名字">
            </div>
            <div class="submit"></div>
        </div>
    </div>
</div>
<script src="__PUBLIC__/js/jquery-3.3.1.min.js"></script>
<script src="__PUBLIC__/js/swiper-4.3.3.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '{:session("appId")}', // 必填，公众号的唯一标识
        timestamp:'{:session("timestamp")}', // 必填，生成签名的时间戳
        nonceStr: '{:session("nonceStr")}', // 必填，生成签名的随机串
        signature: '{:session("signature")}',// 必填，签名
        jsApiList: ["onMenuShareAppMessage"] // 必填，需要使用的JS接口列表
    });
    wx.ready(function(){
        wx.onMenuShareAppMessage({
            title: '长情传送门', // 分享标题
            desc: "原来你的爱情是这样的", // 分享描述
            link: window.origin, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl:"http://qixi.yingqutv.com/static/front/img/shareweixin.jpg", // 分享图标
            type: 'link', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
            },
            cancel: function () {
            }
        });
    });
</script>
<script type="text/javascript">
	function audioAutoPlay(id) {
		var audio = document.getElementById(id),
			play = function () {
				audio.play();
				document.removeEventListener("touchstart", play, false);
			};
		audio.src = '__PUBLIC__/mp3/被风吹过诗朗诵配音.mp3';
		audio.load();
		audio.play();
		document.addEventListener("WeixinJSBridgeReady", function () {
			play();
		}, false);
		document.addEventListener('YixinJSBridgeReady', function () {
			play();
		}, false);
		document.addEventListener("touchstart", play, false);
	}

	audioAutoPlay('bgMusic');
	var mySwiper
	window.onload = function () {
		$("#loading").hide()
		$("#loadLogo").show()
		var i = 0
		var showTime = setInterval(function () {
			if(i<10){
				$("#loding-number").text((i + 1) * 10 + "%")
				$("#logo").css("backgroundImage", 'url("__PUBLIC__/img/logo_' + ((i + 1) * 10) + '.png")')
                i++
			}else{
				clearInterval(showTime)
				$("#loadLogo").hide()
				$(".swiper-container").show()
				mySwiper = new Swiper('.swiper-container', {
					direction: 'vertical',
					loop: false,
					on: {
						init: function () {
							$("p").stop(true)
							$(".text-2 p").css("opacity", "0")
							$('.tlt1').animate({
								opacity: 1
							}, 500, function () {
								$('.tlt2').animate({
									opacity: 1
								}, 1000, function () {
									$('.tlt3').animate({
										opacity: 1
									}, 1000, function () {
										$('.tlt4').animate({
											opacity: 1
										}, 1000,function () {
											$('.tlt5').animate({
												opacity: 1
											}, 1000,function () {
												$('.tlt6').animate({
													opacity: 1
												}, 1000,function () {
													$('.tlt7').animate({
														opacity: 1
													}, 1000);
												});
											});
										});
									});
								});
							});
						},
						transitionStart: function () {
							document.getElementById("bgMusic").play();
						},
						slideChangeTransitionEnd: function () {
							if (this.activeIndex == 0) {
								this.allowSlidePrev = true;
								this.allowSlideNext = true;
								$("p").stop(true)
								$(".text-2 p").css("opacity", "0")
								$('.tlt1').animate({
									opacity: 1
								}, 500, function () {
									$('.tlt2').animate({
										opacity: 1
									}, 1000, function () {
										$('.tlt3').animate({
											opacity: 1
										}, 1000, function () {
											$('.tlt4').animate({
												opacity: 1
											}, 1000,function () {
												$('.tlt5').animate({
													opacity: 1
												}, 1000,function () {
													$('.tlt6').animate({
														opacity: 1
													}, 1000,function () {
														$('.tlt7').animate({
															opacity: 1
														}, 1000);
													});
												});
											});
										});
									});
								});
							} else if (this.activeIndex == 1) {
								this.allowSlidePrev = true;
								this.allowSlideNext = true;
								$("p").stop(true)
								$(".text-1 p").css("opacity", "0")
								$('.tlt8').animate({
									opacity: 1
								}, 500, function () {
									$('.tlt9').animate({
										opacity: 1
									}, 1000, function () {
										$('.tlt10').animate({
											opacity: 1
										}, 1000,function () {
											$('.tlt11').animate({
												opacity: 1
											}, 1000,function () {
												$('.tlt12').animate({
													opacity: 1
												}, 1000,function () {
													$('.tlt12').animate({
														opacity: 1
													}, 1000,function () {
														$('.tlt13').animate({
															opacity: 1
														}, 1000,function () {
															$('.tlt14').animate({
																opacity: 1
															});
														});
													});
												});
											});
										});
									});
								});
							} else if (this.activeIndex == 2) {
								this.allowSlidePrev = true;
								this.allowSlideNext = false;//设置
							} else if (this.activeIndex == 3) {
								this.allowSlidePrev = false;//设置
							}
						}
					}
				})
            }
		},500)
	}
	$(function () {
		$(".btn").click(function () {
			document.getElementById("menBg").play();
			$(".page-4 .btn").fadeOut()
			$(".page-4 .bg-1").fadeOut()
			$(".page-4 .bg-2").fadeIn(200, function () {
				$(".page-4 .bg-2").fadeOut()
				$(".page-4 .bg-3").fadeIn(300, function () {
					$(".page-4 .bg-3").fadeOut()
					$(".page-4 .bg-4").fadeIn(200, function () {
						mySwiper.allowSlideNext = true
						mySwiper.allowSlidePrev = false;
						mySwiper.slideNext();
					})
				})
			})
		})
		$(".submit").click(function () {
			if (!$("input[name='name']").val()) {
				alert("请输入姓名")
			}else{
				localStorage.setItem("name",$("input[name='name']").val())
            }
			location.href = "{:url('index/index/question')}"
		})
	})
</script>
</body>
</html>
